<template>
    <div class="box" @mouseenter="stop" @mouseleave="start">
       <ul>
            <li><a href="#"><img :src="list[0].img"></a></li>
            <li v-for="item in list" :key="item.img"><a href="#"><img :src="item.img"></a></li>
            <li><a href="#"><img :src="list[list.length-1].img"></a></li>
       </ul>
       <ol>
           <li class="on" @click="to">1</li>
           <li>2</li>
           <li>3</li>
       </ol>
        <div class="btn">
            <button class="left" @click="goleft">&lt;</button>
           <button class="right" @click="goright">&gt;</button>
       </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            index: 0,
            foot: 320,
            dis: 0,
            timer: null,
        }
    },
    props: ["list"],
    mounted() {  
        this.timer = setInterval(() => {
                this.goright();     
        }, 2000);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    methods: {
        goleft() {
            
            var ul = document.querySelector('ul');
            if(this.dis == -1280) {
                this.dis = -640;
            } else {
                this.dis -= this.foot;
            }
            ul.style.marginLeft = this.dis+'px';
            // console.log(parseInt(ul.style.marginLeft)); 
            if(this.index == 0) {
               this.index = 2;
            }  else {
                this.index -= 1;
            }
            
            var li = document.querySelectorAll("ol li");
            for(var i =0; i<li.length;i++ ) {
                li[i].className = "";
            }
            li[this.index].className = "on";

        },
        goright() {
            var ul = document.querySelector('ul');
            if(this.dis == 0) {
                this.dis = -640;
            } else {    
                this.dis += this.foot;
            }
            ul.style.marginLeft = this.dis+'px';
            // console.log(ul.style.marginLeft);
          //  this.index -= 1;
              if(this.index == 2) {
               this.index = 0;
            }  else {
                this.index += 1;
            }
            var li = document.querySelectorAll("ol li");
            for(var i =0; i<li.length;i++ ) {
                li[i].className = "";
            }
            li[this.index].className = "on";
        },
        stop() {
            clearInterval(this.timer);
        },
        start() {
           
            this.timer = setInterval(() => {
                this.goright();   
            }, 2000);
        }
    }
}
</script>

<style lang="scss">
* {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.box {
    width: 320px;
    height: 200px;
    position: relative;
    overflow: hidden;
        ul {
            margin-left: 0px;
            width: 1000%;
            height: 100%;
            position: absolute;
            text-align: center;
            img {
                width: 100%;
                // height: 100%;
            }
        }
    li {
        float: left;
    }
    .btn {
        .left,.right {
            background-color: rgba(255,255,255,0.3);
            width: 28px;
            height: 34px; 
            position: absolute; 
            top: 83px;
            cursor: pointer;
        }
        .left {
           left: 5px;
        }
        .right {
            right: 5px;
        }
    }
    ol {
        width: 60px;
        height: 20px;
        position: absolute;
        // background-color: #3c3c3c;
        right: 10px;
        bottom: 10px;
        li {
            text-align: center;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background-color: rgba(255,255,255,0.5);
            z-index: 2;
            font-size: 8px;
            line-height: 15px;
        }
        .on {
            background-color: white;
        }
    }
    }
</style>
